// 登录 问题
let username = localStorage.getItem("username");
if (username) {
  let user = document.querySelector("#user");
  user.innerHTML = username + " " + `<a href="javascript:;">退出</a>`;
  let logOut = document.querySelector(".login a");
  logOut.onclick = function () {
    localStorage.removeItem("username");
    localStorage.removeItem("uid");
    localStorage.removeItem("token");
    location.reload();
  };
}
// 鼠标移入事件
let app = document.querySelector("#app");
app.onmouseover = function () {
  document.querySelector("#app div").style.display = "block";
};
app.onmouseout = function () {
  document.querySelector("#app div").style.display = "";
};
// 点击事件
let lis = document.querySelectorAll(".nav-list li");
console.log(lis);
// 判断是否登录 ，有登录就各自跳转，没登录统一跳到登录页
if (username) {
  lis[0].onclick = () => {};
  lis[1].onclick = () => {};
  lis[2].onclick = () => (location.href = "shoppingCart.html");
} else {
  lis[0].onclick = () => {
    alert("请先登录");
    location.href = "login.html";
  };
  lis[1].onclick = () => {
    alert("请先登录");
    location.href = "login.html";
  };
  lis[2].onclick = () => {
    alert("请先登录");
    location.href = "login.html";
  };
}
//  获取商品信息
let pagenum = 0;
let pagesize = 30;
let columns = document.querySelectorAll(".column-wrap");
async function loadList() {
  let params = { pagenum, pagesize };
  let res = await axios.get(ProductListAPI, { params });
  console.log(res.data.data);
  let cartListArr = res.data.data;
  let html = "";
  cartListArr.forEach((obj) => {
    html += `
        <div class="column"  onclick = "detail(${obj.pid})">
            <img src="${obj.pimg}" alt="">
            <div class="columen-but">
            <p>${obj.pname}</p>
            <span class="sp1">￥${obj.pprice}</span>
            <span class="sp2">包邮</span>
            <span class="sp3">销量${obj.pid}</span>
            </div>
        </div> 
        `;
  });
  columns[0].innerHTML += html;
}
loadList();
async function loadList1() {
  pagenum = pagenum + 1;
  let params = { pagenum, pagesize };
  let res = await axios.get(ProductListAPI, { params });
  console.log(res.data.data);
  let cartListArr = res.data.data;
  let html = "";
  cartListArr.forEach((obj) => {
    html += `
      <div class="column"  onclick = "detail(${obj.pid})">
          <img src="${obj.pimg}" alt="">
          <div class="columen-but">
          <p>${obj.pname}</p>
          <span class="sp1">￥${obj.pprice}</span>
          <span class="sp2">包邮</span>
          <span class="sp3">销量${obj.pid}</span>
          </div>
      </div> 
      `;
  });
  columns[1].innerHTML += html;
}
loadList1();
async function loadList2() {
  pagenum = pagenum + 1;
  let params = { pagenum, pagesize };
  let res = await axios.get(ProductListAPI, { params });
  console.log(res.data.data);
  let cartListArr = res.data.data;
  let html = "";
  cartListArr.forEach((obj) => {
    html += `
      <div class="column"  onclick = "detail(${obj.pid})">
          <img src="${obj.pimg}" alt="">
          <div class="columen-but">
          <p>${obj.pname}</p>
          <span class="sp1">￥${obj.pprice}</span>
          <span class="sp2">包邮</span>
          <span class="sp3">销量${obj.pid}</span>
          </div>
      </div> 
      `;
  });
  columns[2].innerHTML += html;
}
loadList2();
async function loadList3() {
  pagenum = pagenum + 1;
  let params = { pagenum, pagesize };
  let res = await axios.get(ProductListAPI, { params });
  console.log(res.data.data);
  let cartListArr = res.data.data;
  let html = "";
  cartListArr.forEach((obj) => {
    html += `
      <div class="column" onclick = "detail(${obj.pid})">
          <img src="${obj.pimg}" alt="">
          <div class="columen-but">
          <p>${obj.pname}</p>
          <span class="sp1">￥${obj.pprice}</span>
          <span class="sp2">包邮</span>
          <span class="sp3">销量${obj.pid}</span>
          </div>
      </div> 
      `;
  });
  columns[3].innerHTML += html;
}
loadList3();
async function loadList4() {
  pagenum = pagenum + 1;
  let params = { pagenum, pagesize };
  let res = await axios.get(ProductListAPI, { params });
  console.log(res.data.data);
  let cartListArr = res.data.data;
  let html = "";
  cartListArr.forEach((obj) => {
    html += `
      <div class="column" onclick = "detail(${obj.pid})">
          <img src="${obj.pimg}" alt="">
          <div class="columen-but">
          <p>${obj.pname}</p>
          <span class="sp1">￥${obj.pprice}</span>
          <span class="sp2">包邮</span>
          <span class="sp3">销量${obj.pid}</span>
          </div>
      </div> 
      `;
  });
  columns[4].innerHTML += html;
}
loadList4();

let fk = document.querySelector(".fk");
let nav = document.querySelector("nav");
// 监听滚动条  返回顶部  和 吸顶效果 以及获取商品信息
window.onscroll = function () {
  let scr = document.documentElement.scrollTop || document.body.scrollTop;
  if (scr > 133) {
    nav.style.top = 0;
  } else {
    nav.style.top = -133 + "px";
  }
  if (scr > 500) {
    fk.style.display = "block";
  } else {
    fk.style.display = "none";
  }
  fk.onclick = function () {
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
  };
  //变量scrollTop是滚动条滚动时，距离顶部的距离
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // 滚动条的总高度
  var scrollHeight =
    document.documentElement.scrollHeight || document.body.scrollHeight;
  console.log(scrollTop);
  console.log(scrollHeight);
  if (scrollTop > scrollHeight / 2) {
    pagenum++;
    loadList();
    loadList1();
    loadList2();
    loadList3();
    loadList4();
  }
};
// 详情页跳转
function detail(pid) {
  console.log(pid);
  location.href = `../html/Detail.html?pid=${pid}`;
}
// 搜索框，用它网站的接口
let ul = document.querySelector("#association");
function search() {
  let url =
    "https://list.mogu.com/search?cKey=pc-search-entry&_version=8388605";
  let n = document.querySelector("#ipt").value;
  $.ajax({
    url: url,
    dataType: "jsonp",
    data: { searchKey: n },
    success(res) {
      console.log(res.result.list);
      console.log("请求成功");
      let shopArr = res.result.list;
      let html = "";
      shopArr.forEach((v, i) => {
        if (i >= 1) {
          console.log(v.query);
          html = `
               <li>${v.query}</li>
               `;
        }
        ul.innerHTML += html;
        ul.style.display = "block";
      });
    },
  });
}
// document.querySelector("#ipt").oninput = function () {
//   search();
//   ul.innerHTML = ""
// };
// document.querySelector("#ipt").onblur = function () {
//   ul.style.display = "none";
// };
// document.querySelector("#ipt").onfocus = function () {
//   if(ul.innerHTML == ""){
//     ul.innerHTML = `<li style ="color:red">历史记录</li>`;
//   }else{
//     ul.innerHTML = ""
//   }
// }
let ipt = document.querySelector("#ipt");
ipt.addEventListener("focus",function(){
    ul.style.display = "block";
    ul.innerHTML = `<li style ="color:red">历史记录</li>`;
})
ipt.addEventListener("input",function(){
    search();
    // ul.innerHTML = ""
    if(ipt.value == ""){
      console.log("1111");
      ul.innerHTML = `<li style ="color:red">历史记录</li>`;
    }else{
      console.log("222");
      ul.innerHTML = ""
    }
});
ipt.addEventListener("blur",function(){
  ul.style.display = "none";
});

// 轮播
var swiper = new Swiper('.swiper-container', {
  loop: true,  // 循环播放 
  autoplay: {
    stopOnLastSlide: true,  // 自动播放
    delay: 2000,  // 间隔时间
    pauseOnMouseEnter: true,
    
  },
  effect : 'slide',  // 变化样式
  
   navigation: {    // 左右按钮
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
    },
  pagination: {
  el: '.swiper-pagination',
  },
});

// 不知道咋回事，自己修改了下，平常直接调用就行
let mySwiper = document.querySelector(".swiper-container")
  mySwiper.onmouseover = function(){
    swiper.autoplay.stop();
  }
  mySwiper.onmouseout = function(){
    swiper.autoplay.start();
  }

